<template>
	<!-- 近期约饭人员列表 -->
	<view class="membersWp">
		<view v-if="lastDealPartyList.length">
			<u-swipe-action :autoClose="true" v-for="(item,index) in lastDealPartyList" :key="item.createTime">
				<u-swipe-action-item :options="options1" @click.stop="DelMembers(item)">
					<view class="memberItem">
						<view class="left">
							<u-image width="96rpx" height="96rpx" :src="item.photo?item.photo:defaultHead" alt="">
							</u-image>
							<view class="userNameWp">
								<view class="userName">
									{{item.userName?item.userName:''}}
								</view>
								<view class="phone">
									{{item.mobile?item.mobile:''}}
								</view>
							</view>

						</view>
						<view class="right" @click="editMembers(item)" style="margin-right: 30rpx;">
							<view class="text">
								备注
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<nodata v-else nodataImgUrl="https://file.casugn.com/storecompcard/temp/空页面@2x(1)_1681113483838.png"
			nodata-text="暂无数据"></nodata>
		<view class="addBtnWp" @click="addHandleShow">
			<img src="https://file.casugn.com/storecompcard//IsrwBq1acMwQb36a3e864f136d76694ec64c5b35f7a6_1658388912042.png"
				alt="添加">
		</view>
		<u-popup :show="showHandleFrom" :round="20" mode="bottom" @close="showHandleFrom=false">
			<view class="dlgWp">
				<u-sticky bgColor="#fff">
					<u-tabs :list="tabsList" @change="changeTabs" :activeStyle="{color:'#276AEE',fontWeight: 600}"
						lineColor="#276AEE" lineWidth="48rpx" lineHeight="4rpx"
						:inactiveStyle="{color:'#1D2129',fontWeight: 600}">
					</u-tabs>
				</u-sticky>
				<!-- 手动添加到近期约饭列表 -->
				<view v-if="currentTabs==0">
					<view class="handleWp">
						<u-form labelPosition="top" labelWidth="auto" :model="handleFrom" ref="handleFrom"
							:rules="handleRules" errorType="toast">
							<u-form-item label="姓名：" borderBottom style="margin-left: 20rpx;" :required="true"
								prop="userName">
								<u--input maxlength="10" border="none" v-model="handleFrom.userName"
									placeholder="请输入姓名"></u--input>
							</u-form-item>
							<u-form-item label="手机：" borderBottom style="margin-left: 20rpx;">
								<u--input maxlength="13" border="none" v-model="handleFrom.mobile" type='number'
									placeholder="请输入手机号" @blur="checkPhone"></u--input>
							</u-form-item>
						</u-form>
						<view class="submitBtnWp">
							<view style="width: 300rpx;">
								<u-button type="primary" :plain="true" text="取消" @click="cancelPop">
								</u-button>
							</view>
							<view style="width: 300rpx;">
								<u-button type="primary" text="确定" @click="addLastPartyList">
								</u-button>
							</view>

						</view>
					</view>
				</view>
				<!-- 名片夹添加到近期约饭列表 -->
				<view v-if="currentTabs==1">
					<view class="moreListWp">
						<view class="moreItem" v-for="(item,index) in friendList" :key="index"
							@click.stop="selectFriend(item)">
							<view class="left">
								<img :src="item.head" alt="" class='leftImgWp'>
							</view>
							<view class="right">
								<view>
									<text class="name"> {{item.name?item.name:''}}</text>
									<text class="position">{{item.position?item.position:''}}</text>
								</view>
								<view class="company">
									{{item.company?item.company:''}}
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
		</u-popup>

	</view>

</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		defaultHead
	} from '@/config/staticConfig.js'
	import nodata from '@/components/nodata/nodata.vue'
	export default {
		data() {
			return {
				lastDealPartyList: [], //近期约饭列表
				defaultHead,
				startTime: Date.now(),
				isEdit: false,
				friendList: [], //好友列表
				showFriendListPopup: false,
				showHandleFrom: false,
				handleFrom: {
					userName: '',
				},
				handleRules: {
					userName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}, ],
				},
				tabsList: [{
						name: '手动添加'
					},
					{
						name: '名片夹选择'
					},
				],
				currentTabs: 0,
				options1: [{
					icon: 'trash',
					iconSize: '50',
					style: {
						backgroundColor: '#ffece8'
					}
				}],
			};
		},
		components: {
			nodata
		},
		computed: {
			...mapGetters(['userInfo']),
			...mapState(['isCheckingType']),
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中...'
			})
			console.log(opt, 'onload');
			this.getFriendList()
		},
		onShow() {
			this.getLastDealPartyList()

		},
		methods: {
			//获取近期约饭list
			async getLastDealPartyList() {
				let payload = {
					openId: this.userInfo.openId,
				}
				let res = await this.$api.getLastDealPartyList(payload)
				console.log(res, '获取近期约饭list');
				if (res.success && res.result.length > 0) {
					console.log(res.result, '获取近期约饭list');
					this.lastDealPartyList = res.result
				} else {
					this.lastDealPartyList = []
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			closeShowDlg() {
				this.form = {}
				this.showDlg = false
			},

			cancelPop() {
				this.handleFrom = {}
				this.showHandleFrom = false
			},
			DelMembers(item) {
				console.log(item, 'DelMembers');
				//二次确认后删除
				uni.showModal({
					title: '是否删除?',
					success: async (res) => {
						if (res.confirm) {
							let res2 = await this.$api.deleteMeetMembers(item.id)
							//删除接口
							if (res2.success) {
								this.getLastDealPartyList()
							} else {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			editMembers(item) {
				console.log(item, '');
				uni.showModal({
					title: '修改备注',
					content: item.remark ? item.remark : '',
					editable: true,
					success: async (res) => {
						if (res.confirm) {
							// if (!res.content) {
							// 	return uni.showToast({
							// 		title: '请输入新的备注',
							// 		icon: 'error'
							// 	});
							// }
							let payload = {
								...item,
								remark: res.content, //约饭原因
							}
							let res2 = await this.$api.editMeetMembers(payload)
							if (res2.success) {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
								this.getLastDealPartyList()
							} else {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},

			changeTabs(e) {
				this.currentTabs = e.index
			},
			checkPhone() {
				let res = uni.$u.test.mobile(this.handleFrom.mobile)
				if (!res) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
				}
			},
			async addLastPartyList() {
				if (!this.handleFrom.userName) {
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				}
				let payload = {
					...this.handleFrom,
					createBy: this.userInfo.openId,
					type: 2, //来源 1 组局 2 手填
					isDel: 0,
				}
				let res2 = await this.$api.addMeetMembers(payload)
				if (res2.success) {
					uni.showToast({
						title: res2.message,
						icon: 'none'
					});
					this.showHandleFrom = false
					this.handleFrom = {}
					this.getLastDealPartyList()
				} else {
					uni.showToast({
						title: res2.message,
						icon: 'none'
					});
				}


			},

			//获取好友列表
			async getFriendList() {
				let payload = {
					openId: this.userInfo.openId,
					isDel: 0
				}
				let res = await this.$api.queryCardByCondition(payload) //获取好友列表
				if (res.success && res.result.length > 0) {
					// console.log(res.result, '获取好友列表');
					this.friendList = res.result
				} else {
					this.friendList = []
				}
			},
			async selectFriend(item) {
				console.log(item, 'selectFriend-item');
				//筛选
				let result = this.lastDealPartyList.some(i => {
					return i.openId == item.friendOpenId
				})
				if (result) {
					return uni.showToast({
						title: '请勿重复添加',
						icon: 'none'
					});
				}
				let payload = {
					createBy: this.userInfo.openId,
					isDel: 0,
					openId: item.friendOpenId, //好友openId
					type: 2, //来源 1 组局 2 手填
					userName: item.name, //好友姓名
					remark: '', //约饭原因
					photo: item.head,
					mobile: item.mobile

				}
				let res2 = await this.$api.addMeetMembers(payload)
				if (res2.success) {
					uni.showToast({
						title: res2.message,
						icon: 'none'
					});
					this.getLastDealPartyList()
					this.showHandleFrom = false
				} else {
					uni.showToast({
						title: res2.message,
						icon: 'none'
					});
				}
			},
			async selectFriend2(item) {
				console.log(item, 'selectFriend-item');
				//筛选
				let result = this.lastDealPartyList.some(i => {
					return i.openId == item.friendOpenId
				})
				if (result) {
					return uni.showToast({
						title: '请勿重复添加',
						icon: 'none'
					});
				}
				uni.showModal({
					title: '请输入约饭备注',
					editable: true,
					success: async (res) => {
						if (res.confirm && res.content) {
							if (!res.content) {
								return uni.showToast({
									title: '请输入约饭备注',
								});
							}
							let payload = {
								createBy: this.userInfo.openId,
								isDel: 0,
								openId: item.friendOpenId, //好友openId
								type: 2, //来源 1 组局 2 手填
								userName: item.name, //好友姓名
								remark: res.content, //约饭原因
								photo: item.head
							}
							let res2 = await this.$api.addMeetMembers(payload)
							if (res2.success) {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
								this.getLastDealPartyList()
								this.showHandleFrom = false
							} else {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
							}


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			addHandleShow() {

				this.showHandleFrom = true
				setTimeout(() => {
					this.$refs.handleFrom.setRules(this.handleRules)
				}, 200)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.membersWp {
		margin: 0 30rpx;

		.memberItem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 0;
			background: #FFFFFF;
			border-bottom: 1rpx solid #eee;

			.left {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;

				.userNameWp {
					margin-left: 30rpx;
					width: 440rpx;
					height: 96rpx;

					.userName {
						height: 44rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 45rpx;

					}

					.phone {
						margin-top: 16rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #86909C;
						line-height: 39rpx;

					}
				}

			}

			.right {

				.text {
					text-align: center;
					width: 120rpx;
					height: 56rpx;
					background: #E9F0FD;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 28rpx;
					color: #276AEE;
					line-height: 56rpx;
				}


			}

		}

	}

	//添加按钮
	.addBtnWp {
		position: fixed;
		width: 120upx;
		height: 120upx;
		text-align: center;
		background: #FFFFFF;
		box-shadow: 0upx 3upx 20upx 0upx rgba(65, 59, 243, 0.5000);
		border-radius: 50%;
		right: 30upx;
		bottom: 150upx;
		z-index: 10;

		img {
			width: 50upx;
			height: 50upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-25upx) translateY(-25upx);
		}
	}

	//弹窗样式
	.dlgWp {
		margin: 30rpx;
		padding-bottom: 40rpx;
		height: 50vh;
		overflow: auto;

		.handleWp {
			width: 100%;

			.submitBtnWp {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx;
				padding: 30rpx 0;
				overflow: hidden;
				margin-bottom: 40rpx;
			}
		}


		.title {
			text-align: center;
			color: #333333;

		}



		.moreListWp {
			width: 100%;
			height: 100vh;

			.moreItem {
				display: flex;
				margin: 30upx 0;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;

				.left {
					padding-right: 30upx;

					.leftImgWp {
						width: 80upx;
						height: 80upx;
					}
				}

				.right {
					.name {
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 45rpx;
					}

					.position {
						margin-left: 32rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #4E5969;

					}

					.title {
						padding-left: 22upx;
						font-size: 18upx;
						font-weight: 400;
						color: #666666;
						line-height: 36upx;
					}

					.company {
						margin-top: 12upx;
						font-size: 24upx;
						font-weight: 400;
						color: #333333;
						line-height: 24upx;
					}
				}
			}


		}
	}
</style>